﻿<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
    <meta charset="UTF-8">
     <script src="../static/before/js/echarts.min.js"></script>
 <script src="../static/before/js/echarts.min.js"></script>
   <script src="../static/before/js/guizhou.js"></script>

    <script src="../static/before/js/jquery.min.js"></script>
    <title>景区综合数据展示</title>
     <link rel="stylesheet" href="../static/before/css/wodry.css">
    <link rel="stylesheet" href="../static/before/css/index.css">
    <link rel="stylesheet" href="../static/before/css/public.css">


    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                景区综合数据展示
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>
    </div>

    <div class="center">
        <div class="center-left fl">
            <div class="left-top rightTop border">
                <!--<h1 id="ceshi">数据可视化</h1>-->
                <div class="title">基本信息</div>
                <div class="top-list">
                    <p>生活不止眼前的苟且，还有诗和远方</p>
                    <ul>
                        <li>贵州省地州市：9(个)</li>
                        <li>热门景区：16(个)</li>
                        <li>热门旅行社：30(个)</li>
                        <li>旅游团队类型：4种</li>
                        <li>全省接待总人数：6.44(亿人次)</li>
                        <li>旅游总收入：6642.16(亿元)</li>
                    </ul>
                </div>
            </div>

            <div class="left-cen rightTop border">
                <div class="title">贵州省A级景区目录</div>
                <ul class="company" id="ceshi">
                    <li class="wodryRX0">
                        <span>NO.1</span>
                        国家AAAAA级景区7个</li><br/>
                    <li class="wodryRX1">NO.2
                        AAAA级景区133个</li>
                    <br/>
                    <li class="wodryRX2">NO.3
                        AAA级景区373个</li>
                    <br/>
                    <li class="wodryRX3">NO.4
                        AA级景区47个</li>
                    <br/>
                    <li class="wodryRX4">NO.5
                        A级景区7个</li>
                </ul>
            </div>

            <div class="left-bottom rightTop border">
                <div class="title">旅游团队类型占比</div>
                <div class="bottom-b">
                    <div id="chart3" style="width: 360px; height: 205px;"></div>
                </div>
            </div>
        </div>

        <div class="center-cen fl">
           <div class="cen-top rightTop border">
                <div id="box22" style="width: 720px; height: 550px;"></div>
            </div>
            <div class="cen-bottom rightTop border">
                    <div class="title">不同种类消费金额情况</div>
                    <div id="pay" style="width: 750px; height: 240px;"></div>
            </div>

        </div>
        <div class="center-right fr">
            <div class="right-top rightTop border">
                <div class="title">贵州基础设施发展情况</div>
                <div class="echart wenzi">
                                    <div class="gun">
                                    <span>序号</span>
                                    <span>指标</span>
                                    <span>数量</span>
                                </div>
                                    <div id="FontScroll" class="myscroll">
                                         <ul>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>1</b>
                                                    </span>
                                                    <span>公路线路里程</span>
                                                    <span>19.69万公里</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>2</b>
                                                    </span>
                                                    <span>高速公路里程</span>
                                                    <span>6453公里</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>3</b>
                                                    </span>
                                                    <span>城市道路长度</span>
                                                    <span>9657公里</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>4</b>
                                                    </span>
                                                    <span>桥梁</span>
                                                    <span>1222座</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>5</b>
                                                    </span>
                                                    <span>通航机场</span>
                                                    <span>11个</span>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>6</b>
                                                    </span>
                                                    <span>高速铁路</span>
                                                    <span>1127公里</span>
                                                </div>
                                            </li>
                                             <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>7</b>
                                                    </span>
                                                    <span>A级景区</span>
                                                    <span>567家</span>
                                                </div>
                                            </li>
                                             <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>8</b>
                                                    </span>
                                                    <span>A级饭店（酒店）</span>
                                                    <span>247家</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

            </div>
             <div class="right-cen border">
                                <div class="title">贵州省100家优强旅行社</div>
                                <div class="right-cen-cent">
                                    <div id="chart2" style="width: 320px; height: 210px;"></div>
                                </div>

             </div>

             <div class="right-top rightTop border">
                             <div class="title">旅行景区人流量排行</div>
                 <div class="echart wenzi">
                                    <div class="gun">
                                    <span>排名</span>
                                    <span>旅行景区名称</span>
                                    <span>人流量</span>
                                </div>
                                    <div id="FontScroll" class="myscroll">
                                         <ul>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>1</b>
                                                    </span>
                                                    <span>黄果树瀑布</span>
                                                    <span>15031</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>2</b>
                                                    </span>
                                                    <span>龙宫</span>
                                                    <span>10789</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>3</b>
                                                    </span>
                                                    <span>梵净山</span>
                                                    <span>10563</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>4</b>
                                                    </span>
                                                    <span>荔波小七孔</span>
                                                    <span>9889</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>5</b>
                                                    </span>
                                                    <span>青岩古镇</span>
                                                    <span>8023</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>6</b>
                                                    </span>
                                                    <span>织金洞</span>
                                                    <span>6970</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>7</b>
                                                    </span>
                                                    <span>西江千户苗寨</span>
                                                    <span>6344</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>8</b>
                                                    </span>
                                                    <span>天眼基地</span>
                                                    <span>5825</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>9</b>
                                                    </span>
                                                    <span>赤水丹霞</span>
                                                    <span>4873</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>10</b>
                                                    </span>
                                                    <span>万峰林</span>
                                                    <span>3553</span>

                                                </div>
                                            </li>
                                            <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>11</b>
                                                    </span>
                                                    <span>百里杜鹃</span>
                                                    <span>3358</span>

                                                </div>
                                            </li>
                                             <li>
                                                <div class="fontInner clearfix">
                                                    <span>
                                                        <b>12</b>
                                                    </span>
                                                    <span>乌蒙山</span>
                                                    <span>2387</span>

                                                </div>
                                            </li>

                                        </ul>

                                    </div>
                                </div>


                            </div>
            </div>
                        </div>
                    </div>


</div>
<!-- 地图模块-消费金额 开始-->
<script>
    var chartDom = document.getElementById('chart2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        textStyle: {
            fontSize: 12,//字体大小
            color: '#ffffff'//字体颜色
        },
      },
      series: [
        {
          name: '旅行社等级',
          type: 'pie',
          radius: '60%',
          label : {
        　　　　normal : {
        　　　　　　formatter: '{b}:({d}%)',
        　　　　　　textStyle : {
        　　　　　　　　fontWeight : 'normal',
        　　　　　　　　fontSize : 12,
        　　　　　　}
        　　　　}
        　　},
          data: [
            { value: 6, name: '5星' },
            { value: 17, name: '4星' },
            { value: 18, name: '3星' },
            { value: 19, name: '2星' },
            { value: 40, name: '1星' }
          ],
          color:["#FEE449","#0000ff","#00FFA8","#F76F01","#9F17FF"],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);
</script>
<script>
        // 初始化echarts实例
       var myChart = echarts.init(document.getElementById('box22'));
       var option = {
       title: {
                text : '贵州各行政区旅游总人数（2021年）',
                x: "center",
                textStyle: {
                   fontSize: 15,
                   fontWeight: 'bolder',
                   color: "yellow" // 主标题文字颜色
            },
        },
        tooltip: {  //这里设置提示框
                    trigger: 'item',  //数据项图形触发
                    backgroundColor: "red",  //提示框浮层的背景颜色。
                    //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
                    formatter: '地区：{b}<br/>总人数：{c}'
                },
    visualMap: {
        top: 'center',
        left: 'left',
        min: 10,
        max: 50000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    },
    series: [{
        name: '总人数',
        type: 'map',
        mapType: '贵州',
        // selectedMode : 'single',
        roam: false,
        itemStyle:{
            normal:{
                label:{
                    show:true,
                    textStyle: {
                        color:"black"
                    }
                }
                },
            zoom:1,
            emphasis:{label:{show:true}}
        },
        top:"5%",
        data:[
            {name: '贵阳市',value: 15200.3},
            {name: '遵义市',value: 10979.38},
            {name: '六盘水市',value: 7642.42},
            {name: '毕节市',value: 8020.23},
            {name: '铜仁市',value: 9120.33},
            {name: '安顺市',value: 7508.56},
            {name: '黔西南布依族苗族自治州',value: 7761.84},
            {name: '黔东南苗族侗族自治州', value: 14842.54},
            {name: '黔南布依族苗族自治州',value: 10402.98},
        ],
    }]
};
myChart.setOption(option);
</script>
 <!-- 地图模块-消费金额 结束-->

<script src="../static/before/js/jquery.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../static/before/js/echarts.js"></script>
<script src="../static/before/js/wodry.min.js"></script>
<script src="../static/before/js/fontscroll.js"></script>
<script src="../static/before/js/echarts.min.js"></script>
<script src="../static/before/js/guizhou.js"></script>
<script>
    var counter = 3000;
    var ulist=document.getElementById("ceshi").getElementsByTagName("li");
    for (var i=0;i<ulist.length;i++){
        //console.log(ulist[i].className);
        var liclass=ulist[i].className;
        var a= $('.'+liclass+'').wodry({
            animation: 'rotateX',
            delay: counter,
            animationDuration: 1000
        });
        if(counter>3050){
            counter=3000;
        }else {
            counter +=10;
        }
        //console.log(counter);

    }

    //顶部时间
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var nowTime;

        nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str){
        var realNum;
        if(str<10){
            realNum    = '0'+str;
        }else{
            realNum    = str;
        }
        return realNum;
    }
    setInterval(getTime,1000);

</script>

</body>
</html>